<template>
  <div class="head-container">
    <!-- 搜索 -->
    <el-input v-model="query.personName" clearable placeholder="姓名" style="width: 200px;" class="filter-item" @keyup.native="toQuery" />
    <el-input v-model="query.phone" clearable placeholder="手机号码" style="width: 200px;" class="filter-item" @keyup.native="toQuery" />
    <el-input v-model="query.serviceproviderName" clearable placeholder="所属服务商" style="width: 200px;" class="filter-item" @keyup.native="toQuery" />
    <AreaSelect ref="areaSelect" class="filter-item" :default-props="query" is-view="false" clearable @change="handleSelectArea" />
    <el-select v-model="query.major" clearable class="filter-item">
      <el-option
        v-for="item in majors"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select v-model="query.level" clearable class="filter-item">
      <el-option
        v-for="item in levels"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
    <!-- 新增 -->
    <div v-if="type === 'engineer'" style="display: inline-block;margin: 0px 2px;">
      <el-button
        v-permission="['ADMIN','TSERVICEPROVIDERPERSON_ALL','TSERVICEPROVIDERPERSON_CREATE']"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="$refs.form.dialog = true"
      >新增</el-button>
      <eForm ref="form" :is-add="true" :is-view="false" />
    </div>
    <div v-else style="display: inline-block;margin: 0px 2px;">
      <el-button
        v-permission="['ADMIN','TSERVICEPROVIDERPERSON_ALL','TSERVICEPROVIDERPERSON_CREATE']"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="handleAdd"
      >新增</el-button>
      <eForm ref="form" :is-add="true" :is-view="false" />
    </div>
  </div>
</template>

<script>
import eForm from './form'
import AreaSelect from '@/components/AreaSelect'
import { EngineerMajors, EngineerLevels } from '@/constants/consts'
export default {
  components: { eForm, AreaSelect },
  props: {
    type: {
      type: String,
      default: ''
    },
    query: {
      type: Object,
      required: true
    },
    supThis: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      queryTypeOptions: [
        { key: 'personName', display_name: '姓名' },
        { key: 'serviceproviderName', display_name: '服务商名称' }
      ],
      majors: EngineerMajors,
      levels: EngineerLevels
    }
  },
  methods: {
    toQuery() {
      this.supThis.params.page = 0
      this.supThis.init()
    },
    handleAdd() {
      this.$parent.handleAdd()
    },
    handleSelectArea(countryItem, provinceItem, cityItem, areaItem) {
      this.query.country = countryItem.name
      this.query.province = provinceItem.name
      this.query.city = cityItem.name
      this.query.county = areaItem.name
    }
  }
}
</script>
